<template>
  <u-navbar bg-color="unset" left-icon-color="#000" auto-back placeholder></u-navbar>
  <image
    :src="prefixURL('/uploads/20240816/99e1b72ea94a0341f71629b4aa169d96.png?x-oss-process=image/format,webp/resize,w_375')"
    class="banner-img" mode=""></image>
  <view class="home">
    <view class="raffle-item-active" :style="{top:`${top}rpx`,left:`${left}rpx`}"></view>
    <view class="u-flex-y-center u-flex-between u-m-b-24">
      <view class="raffle-item" v-for="(item,index) in firstList" :key="index">
        <u-image customStyle="margin:0 auto 14rpx" width="66rpx" height="66rpx" :src="prefixURL(item.image)"></u-image>
        <view>{{item.name}}</view>
      </view>
    </view>
    <view class="u-flex-y-center u-flex-between u-m-b-24">
      <view class="raffle-item" v-for="(item,index) in secondList" :key="index">
        <u-image customStyle="margin:0 auto 14rpx" width="66rpx" height="66rpx" :src="prefixURL(item.image)"></u-image>
        <view>{{item.name}}</view>
      </view>
    </view>
    <view class="u-flex-y-center u-flex-between ">
      <view class="raffle-item" v-for="(item,index) in thirdList" :key="index">
        <u-image customStyle="margin:0 auto 14rpx" width="66rpx" height="66rpx" :src="prefixURL(item.image)"></u-image>
        <view>{{item.name}}</view>
      </view>
    </view>
    <view class="raffle-btn" @click="handleStart">
      {{luckInfo.consume_score}}积分1次
    </view>
  </view>
  <view class="u-p-l-38 u-p-r-38" style="position: relative;">
    <u-text margin="110rpx 0 16rpx 0" color="#000" text="活动规则" size="14" bold></u-text>
    <u-parse :content="luckInfo.lottery_rule"></u-parse>
  </view>
  <image src="@/static/images/01_5gt.png" @click="$u.route('/pages/index/raffleRecord')" class="record-btn" mode="">
  </image>
  <up-overlay :show="show" @click="show = false">
    <view class="mask-box">
      <image src="@/static/images/01_7gxn.png" v-if="lotteryData.prompt != '谢谢参与'" class="raffle_y"></image>
      <image :src="prefixURL(lotteryData.image)" class="raffle_n" v-else></image>
      <view>{{lotteryData.prompt}}</view>
      <view class="mask-btn" v-if="lotteryData.prompt == '谢谢参与'">关闭</view>
      <view class="mask-btn" v-else>立即收下</view>
    </view>
  </up-overlay>

</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  import { luck_config, luck_lottery } from '../../config/api';
  import { prefixURL } from '../../util/util';
  const show = ref(false)
  const firstList = ref([])
  const secondList = ref([])
  const thirdList = ref([])
  const luckInfo = ref({})
  const lotteryData = ref({})
  const left = ref(114)
  const top = ref(232)
  onMounted(() => {
    _luck_config()
  })
  // 抽奖列表
  const _luck_config = () => {
    luck_config().then(res => {
      luckInfo.value = res.data
      firstList.value = res.data.prize.slice(0, 3)
      secondList.value = res.data.prize.slice(3, 5)
      thirdList.value = res.data.prize.slice(5)
    })
  }
  const handleStart = () => {
    luck_lottery().then(res => {
      lotteryData.value = res.data
      let index = luckInfo.value.prize.findIndex(item => item.id == res.data.id)
      _initLucky(index)
    })
  }
  const _initLucky = (index) => {
    let arr = [{
      top: 232,
      left: 114
    }, {
      top: 232,
      left: 296
    }, {
      top: 232,
      left: 478
    }, {
      top: 414,
      left: 114
    }, {
      top: 414,
      left: 478
    }, {
      top: 596,
      left: 114
    }, {
      top: 596,
      left: 296
    }, {
      top: 596,
      left: 478
    }]
    let top_index = 0
    let timer = setInterval(() => {
      left.value = arr[top_index].left
      top.value = arr[top_index].top
      top_index++
      if (top_index == 8) top_index = 0
      console.log(top.value, left.value)
    }, 200)
    console.log(index)
    setTimeout(() => {
      clearInterval(timer)
      top.value = arr[index].top
      left.value = arr[index].left
      show.value = true
    }, 3000)
  }
</script>

<style lang="scss" scoped>
  .home {
    position: relative;
    z-index: 2;
    padding: 240rpx 114rpx 0;
  }

  .banner-img {
    height: 1624rpx;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .raffle-item-active {
    width: 158rpx;
    height: 158rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #F87610;
    position: absolute;
    background: rgba(248, 118, 16, .2);
    top: 232rpx;
    transition: all .1s;
  }

  .raffle-item {
    font-size: 24rpx;
    font-weight: 500;
    color: #e85711;
    padding: 22rpx 0;
    width: 158rpx;
    text-align: center;
  }

  .raffle-btn {
    width: 158rpx;
    height: 158rpx;
    border-radius: 40rpx;
    padding-top: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    position: absolute;
    top: 415rpx;
    left: 298rpx;
  }

  .record-btn {
    width: 434rpx;
    height: 124rpx;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    margin: auto;
  }

  .mask-box {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 638rpx;
    height: 462rpx;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7E8E1 100%);
    border-radius: 32rpx;
    font-size: 28rpx;
    color: #000;
    text-align: center;

    .raffle_y {
      width: 476rpx;
      height: 334rpx;
      margin: auto;
      display: block;
      margin-top: -80rpx;
    }

    .raffle_n {
      width: 148rpx;
      height: 167rpx;
      margin: 50rpx auto 32rpx;
      display: block;
    }

    .mask-btn {
      width: 340rpx;
      height: 72rpx;
      background: #F87610;
      border-radius: 44rpx;
      margin: auto;
      margin-top: 60rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      line-height: 72rpx;
    }
  }
</style>